<template>
  <div
    class="sx-margin-top-20 sx-padding-glod-left-right-20"
    style="height: 100%"
  >
    <el-row :gutter="20" style="height: 100%">
      <el-col :xs="6" :sm="6" :lg="6" :xl="6" style="height: 100%">
        <sx-content
          class="sx-margin-bottom-20"
          :title="'月度合同签约数量'"
          style="height: 30.5%"
        >
          <dv-border-box-8>
            <Number />
          </dv-border-box-8>
        </sx-content>
        <sx-content
          :title="'月度合同签约金额'"
          class="sx-margin-bottom-20"
          style="height: 30.5%"
        >
          <dv-border-box-8>
            <Money />
          </dv-border-box-8>
        </sx-content>
        <sx-content
          :title="'月度合同签约情况环比分析'"
          class="sx-margin-bottom-20 capital-height"
          style="height: 30.5%"
        >
          <dv-border-box-8>
            <Analysis />
          </dv-border-box-8>
        </sx-content>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="12" :xl="12" style="height: 100%">
        <sx-content :header-show="false" style="height: 15%">
          <ContractedQuantity />
        </sx-content>
        <sx-content
          :title="'区域合同签约情况统计'"
          class="sx-margin-top-20"
          style="height: 46%"
        >
          <dv-border-box-1> <DiTu /></dv-border-box-1>
        </sx-content>
        <sx-content
          :title="'年度各类型合同签约情况统计'"
          class="sx-margin-top-20"
          style="height: 28.5%"
        >
          <GeZhongAgreement />
        </sx-content>
      </el-col>
      <el-col :xs="6" :sm="6" :lg="6" :xl="6" style="height: 100%">
        <sx-content :title="'年度合同签约状态情况统计'" style="height: 34%">
          <dv-border-box-8 :reverse="true">
            <YearContract />
          </dv-border-box-8>
        </sx-content>
        <sx-content
          :title="'年度承办单位合同签约情况TOPS'"
          class="sx-margin-top-20"
          style="height: 58%"
        >
          <dv-border-box-8 :reverse="true">
            <ContractTops />
          </dv-border-box-8>
        </sx-content>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import SxContent from "@/components/content/index.vue";
import Number from "./components/number.vue";
import Money from "./components/money.vue";
import Analysis from "./components/analysis.vue";
import GeZhongAgreement from "./components/GeZhongAgreement.vue";
import ContractedQuantity from "./components/ContractedQuantity.vue";
import YearContract from "./components/YearContract.vue";
import ContractTops from "./components/ContractTops.vue";
import DiTu from "../components/ditu/ditu.vue";
export default {
  components: {
    SxContent,
    Number,
    Money,
    Analysis,
    GeZhongAgreement,
    ContractedQuantity,
    YearContract,
    ContractTops,
    DiTu,
  },
};
</script>
<style lang="scss" scoped>
.service-app-height {
  height: calc(30% - 10px) !important;
}
.service-quality-height {
  height: calc(30% - 20px) !important;
}
.capital-height {
  height: calc(31% - 20px) !important;
}
.headliststyle {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
}
</style>
